<div class="role-table-container" [@fadeIn]="'active'">
  <form class="form-vertical" role="form">
    <div class="row">
      <div class="col-md-11">
        <div class="input-group">
          <input [(ngModel)]="searchStr" name="searchStr" class="form-control" type="text" placeholder="角色名称">
          <span class="input-group-btn">
            <button class="btn btn-secondary" type="button" (click)="searchRole()">
              <i class="fa fa-search" aria-hidden="true"></i>
            </button>
          </span>
        </div>
      </div>
      <div class="col-md-1">
        <div class="input-group pull-right">
          <button class="btn btn-primary" type="button" (click)="newRole()">
            <i class="fa fa-plus" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
  </form>
  <div class="row">
    <div class="col-md-12">
      <div class="role-item-container">
        <p-table [value]="roleList" dataKey="id" editMode="row" [paginator]="true" [rows]="10" [pageLinks]="10"
          [totalRecords]="totalRecords" [lazy]="true" (onLazyLoad)="pageChanged($event)"
          styleClass="p-datatable-gridlines">
          <ng-template pTemplate="header">
            <tr>
              <th>角色名称</th>
              <th>状态</th>
              <th>备注</th>
              <th>前端页面权限</th>
              <th>后端接口权限</th>
              <th>操作</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
            <tr [pEditableRow]="rowData">
              <td>
                {{rowData.roleName}}
              </td>
              <td>
                <span *ngIf="rowData.status==1" class='badge bg-success'>已启用</span>
                <span *ngIf="rowData.status==0" class='badge bg-danger'>已禁用</span>
              </td>
              <td>
                {{rowData.remark}}
              </td>
              <td>
                <h5 *ngFor="let componentPermission of rowData.componentEntities">
                  <span class="badge bg-warning">{{componentPermission.componentName}}</span>
                </h5>
              </td>
              <td>
                <h5 *ngFor="let apiPermission of rowData.apiEntities">
                  <span class="badge bg-warning">{{apiPermission.apiName}}</span>
                </h5>
              </td>
              <td style="text-align:right">
                <p-button icon="fa fa-pencil" styleClass="p-button-success" [style]="{ 'margin-right': '.5em' }"
                  (click)="editRole(rowData, ri)"></p-button>
                <p-button icon="fa fa-trash" styleClass="p-button-danger" (click)="delRole(rowData, ri)"></p-button>
              </td>
            </tr>
          </ng-template>
        </p-table>
      </div>
    </div>
  </div>
</div>